<script setup name="informlist">
import { ref, reactive, onMounted, computed, watch, onBeforeUnmount, shallowRef } from 'vue';
import OAMain from '@/components/OAMain.vue';
import OADialog from '@/components/OADialog.vue';
import OAPagination from '@/components/OAPagination.vue';
import timeFormatter from '@/utils/timeFormatter';
import { useAuthStore } from '@/stores/auth';
import informHttp from '@/api/informHttp';
import { ElMessage } from 'element-plus';

const authStore = useAuthStore()

let informs = ref([])
let pagination = reactive({
    total: 0,
    page: 1,
})
let dialogFormVisible = ref(false)
let handleIndex = 0

const onShowDialog = (index) => {
    handleIndex = index
    dialogFormVisible.value = true
}

const onDelete = async () => {
    try {
        let inform = informs.value[handleIndex]
        await informHttp.deleteInform(inform.id)
        console.log(1)
        informs.value.splice(handleIndex, 1)
        ElMessage.success("通知删除成功")
        dialogFormVisible.value = false
    } catch (err) {
        ElMessage.error(err)
    }

}

onMounted(async () => {
    try {
        let data = await informHttp.getInformList(1)
        //data = {count:10,next: ,previous: . results:[]}
        pagination.total = data.count
        informs.value = data.results
        //去重，不然每条通知会显示很多次，根据几个部门可见决定
        informs.value = Array.from(new Map(informs.value.map(item => [item.id, item])).values());
        console.log(informs.value)
    } catch (err) {
        ElMessage.error(err)
    }
})
</script>


<template>
    <OADialog v-model="dialogFormVisible" title="提示" @submit="onDelete">
        <span>您确定要删除这篇通知吗？</span>
    </OADialog>
    <OAMain title="通知列表">
        <el-card>
            <el-table :data="informs" style="width: 100%">
                <el-table-column label="标题">
                    <template #default="scope">
                        <el-badge v-if="scope.row.reads.length == 0" is-dot class="item">
                            <RouterLink :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">{{ scope.row.title
                                }}
                            </RouterLink>
                        </el-badge>
                        <RouterLink v-else :to="{ name: 'inform_detail', params: { pk: scope.row.id } }">{{ scope.row.title
                                }}
                            </RouterLink>
                    </template>
                </el-table-column>
                <el-table-column label="发布者">
                    <template #default="scope">
                        {{ '[' + scope.row.author.department.name + ']' + scope.row.author.realname }}
                    </template>
                </el-table-column>
                <el-table-column label="发布时间">
                    <template #default="scope">
                        {{ timeFormatter.stringFromDateTime(scope.row.create_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="部门可见">
                    <template #default="scope">
                        <el-tag v-if="scope.row.public" type="success">公开</el-tag>
                        <el-tag v-else v-for="department in scope.row.departments" key="department.name" type="info">{{
                            department.name }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button v-if="scope.row.author.uid == authStore.user.uid" @click="onShowDialog(scope.$index)"
                            type="danger" icon="Delete" />
                        <el-button v-else disabled type="default"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <template #footer>
                <!-- <el-pagination background layout="prev, pager, next" :total="pagination.total" :page-size="10"
                    v-model:current-page="pagination.page" /> -->
                <OAPagination v-model="pagination.page" :total="pagination.total"></OAPagination>
            </template>
        </el-card>
    </OAMain>
</template>


<style scoped>
.el-tag {
    margin-right: 4px;
}

.el-badge{
    margin-right: 4px;
    margin-top: 4px;
}
</style>